<template>
    <div>
        <!-- 头部导航
            当我们使用编程式导航跳转页面不需要传参的时候，可以直接使用下面这种写法
            this.$router.push(路由路径)
         -->
        <van-nav-bar title="个人信息编辑" left-arrow
        @click-left="$router.push('/personal')"
        @click-right="$router.push('/index')">
            <template #right>
                <van-icon name="wap-home-o" size="20" />
            </template>
        </van-nav-bar>
        <!-- 内容 -->
        <div class="content">
            <div class="head_img">
                <!-- <img src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg" alt=""> -->
                <img :src="user.head_img | joinPath" alt="">
                <van-uploader :after-read="afterRead" />
            </div>
            <van-cell title="昵称" @click="showNickDialog" is-link :value="user.nickname" />
            <!-- 昵称编辑弹窗 -->
            <van-dialog v-model="nickIsShow" title="编辑昵称" 
            show-cancel-button
            @confirm="nickConfirmFn"
            :before-close="nickBeforeColseFn">
                <!-- required :表示此字段必填，在昵称旁边会多一个星号 -->
                  <van-field
                        v-model.trim="nickname"
                        required
                        label="昵称"
                        placeholder="请求输入昵称"
                    />
            </van-dialog>
            <van-cell title="密码" is-link value="********" @click="pwShowFn" />
            <!-- 密码弹窗 -->
            <van-dialog show-cancel-button title="编辑密码"
            v-model="pwIsShow"
            @confirm="pwConfirmFn"
            :before-close="pwBeforCloseFn">
                <van-field v-model="oldPw" required label="原密码" placeholder="请输入原密码"></van-field>
                <van-field v-model="newPw" required label="新密码" placeholder="请输入新密码"></van-field>
            </van-dialog>
            <van-cell title="性别" is-link :value="user.gender==1?'男':'女'" />
        </div>
    </div>
</template>

<script>
import {  userDetail, user_update } from "@/api/user.js"
import { upload } from "@/api/common.js"
import { rules } from "@/utils/validator.js"
export default {
    data(){
        return {
            user: {},
            id: localStorage.getItem("72-user-id"), // 登录后获取到的用户id
            nickIsShow: false,      // 默认隐藏昵称弹窗
            nickname: "",
            pwIsShow: false,        // 默认隐藏密码弹窗
            oldPw: "",              // 原密码
            newPw: "",              // 新密码
        }
    },
    created(){
        // 登录后获取到的用户id
        // let id = localStorage.getItem("72-user-id");
        // 获取用户详情
        userDetail(this.id).then(res=>{
            // console.log(27,res);
            this.user = res.data.data;
        })
    },
    methods:{
        // 控制密码弹窗的显示
        pwShowFn(){
            this.pwIsShow = true;
        },
        // 关闭弹窗前触发的函数
        pwBeforCloseFn(action, done){
            if(this.oldPw !== this.user.password&&action=="confirm"){
                return done(false)
            }
            if(this.oldPw === this.newPw&&action=="confirm"){
                return done(false)
            }
            // if(!this.newPw){
            if(rules.passwordReg.test(this.newPw) === false&&action=="confirm"){
                return done(false)
            }

            done()    // 关闭弹窗
        },
        // 修改密码
        pwConfirmFn(){
            if(this.oldPw !== this.user.password){
                this.$toast.fail("原密码输入错误！")
                return
            }
            if(this.oldPw === this.newPw){
                this.$toast.fail("新密码不能和原密码相同！")
                return
            }
            // if(!this.newPw){
            if(rules.passwordReg.test(this.newPw) === false){
                this.$toast.fail("密码长度为3到16位！")
                return
            }
            // 调用接口实现密码修改
            user_update(this.id, {
                password: this.newPw
            }).then(res=>{
                if(res.data.message == "修改成功"){
                    // 把原密码更新为新密码
                    this.user.password = this.newPw;
                    this.$toast.success(res.data.message)
                }else{
                    this.$toast.fail(res.data.message)
                }
            })

        },
        // 弹窗关闭前触发的回调函数
        nickBeforeColseFn(action, done){
            // console.log(65,action);
            if(!this.nickname&&action=='confirm'){
                done(false) // 阻止关闭弹窗
            }else{
                done() // 关闭弹窗
            }
        },
        // 显示昵称弹窗
        showNickDialog(){
            this.nickIsShow = true;
            // 设置弹窗中昵称的默认值
            this.nickname = this.user.nickname;
        },
        // 修改昵称
        nickConfirmFn(){
            // 判断昵称是否为空
            if(!this.nickname){
                this.$toast.fail("昵称不能为空！")
                return
            }
            // 调用接口实现修改
            user_update(this.id, {
                nickname: this.nickname
            }).then(res=>{
                if(res.data.message == "修改成功"){
                    // 更新页面中的昵称
                    this.user.nickname = res.data.data.nickname;
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        // 选择图片成功后的回调函数
        afterRead(file){
            console.log(48,file.file);
            let formData = new FormData();
            formData.append("file",  file.file)
            upload(formData).then(res=>{
                console.log(53,res);
                if(res.data.message == "文件上传成功"){
                    let url = res.data.data.url;
                    // console.log(56,url);
                    // 在这里调用修改头像的接口
                    user_update(this.id, {
                        head_img: url
                    }).then(result=>{
                        // console.log(62,result);
                        if(result.data.message == "修改成功"){
                            // 更新页面效果
                            this.user.head_img = result.data.data.head_img;
                            return
                        }
                        this.$toast.fail(result.data.message);
                    })
                }else{
                    this.$toast.fail(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/**

/deep/ 是less的语法，表示样式穿透
 什么时候才会用到呢？
 答：当我们设置组件内部标签样式的时候 需要用到
*/ 
/deep/.van-nav-bar{
    border-bottom: 2px solid #e9e9e9;
    .van-nav-bar__arrow,.van-icon{
        color: #000;
    }
}
.content{
    .head_img{
        width: 100px;
        height: 100px;
        overflow: hidden;
        margin: 20px auto;
        position: relative;
        img{
            width: 100%;
        }
        /deep/.van-uploader{
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            .van-uploader__wrapper{
                height: 100%;
                .van-uploader__upload{
                    width: 100%;
                    height: 100%;
                    margin: 0;
                }
            }
        }
    }
    .van-cell{
        border-bottom: 2px solid #e9e9e9;
    }
}
</style>